<div class="layui-row layui-col-space15">
    <div class="layui-col-lg8 layui-col-md8 layui-col-xs12">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-tab layui-tab-brief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">README</li>
                        <li>项目结构</li>
                        <li>开发规范</li>
                        <li>技术文档</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show hidden-overflow-y">
                            <div class="layui-card-body">
                                <ul class="layui-timeline">
                                    <li class="layui-timeline-item">
                                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                        <div class="layui-timeline-content layui-text">
                                            <h3 class="layui-timeline-title">平台简介</h3>
                                            <ul>
                                                <li>Lotso Web 是基于多个优秀的开源项目，高度整合封装而成 Java Web 应用基础平台</li>
                                                <li>目前基础版本具有四个模块：系统管理、机构管理、监控管理、批量任务</li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                                <ul class="layui-timeline">
                                    <li class="layui-timeline-item">
                                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                        <div class="layui-timeline-content layui-text">
                                            <h3 class="layui-timeline-title">运行体验</h3>
                                            <ul>
                                                <li>具备运行环境：JDK1.8+、Maven3.0+、MySql5.7+</li>
                                                <li>插件要求：lombok(必须)、mybatis(提高开发效率)</li>
                                                <li>根据 doc/sql/web-mysql.sql 文件创建数据库与表数据</li>
                                                <li>根据自己创建的数据库账号密码，修改 src\main\resources\application.yml 配置文件中相应参数</li>
                                                <li>运行启动（正常springboot运行）：main 方法运行入口类 com.lotso.web.WebApplication</li>
                                                <li>管理员账号（用户名/密码）：admin/admin</li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="layui-tab-item hidden-overflow-y">
                            <div class="layui-card-body">
                                <pre class="layui-code" lay-title="后端">
|-common                      // 基础模块
|     |-config                  // 配置
|     |-exception               // 基础异常
|     |-log                     // 日志组件
|     |-security                // 权限安全
|     |-utils                   // 工具组件
|
|-module                      // 业务模块
|     |-base                    // 基础模块
|     |-batch                   // 批量任务模块
|     |-monitor                 // 监控模块
|     |-organization            // 机构管理
|     |-system                  // 系统管理
|
|-WebApplication              // 启动类
                                </pre>
                                <pre class="layui-code" lay-title="前端">
|-mapper                      // Mybatis Mapper 文件
|     |-batch                   // 批量处理模块
|     |-system                  // 系统模块
|
|-static                      // 静态组件
|     |-global                  // 全局层
|           |-css                   // 样式
|           |-images                // 图片
|           |-plugins               // 第三方库
|     |-module                  // layui 模块
|           |-formSelects           // Select 下拉
|           |-iconPicker            // 图标选择
|           |-treetable             // 树状表格
|           |-admin.js              // admin模块
|           |-index.js              // index模块
|     |-pages                   // 页面层
|
|-templates                   // 模板页面
|     |-error                   // error模块
|     |-gen                     // 代码生成模板
|     |-index                   // index模块
|     |-layout                  // 页面布局
|     |-module                  // 业务模块（内部根据业务细分）
|     |-index.html              // 主界面
|     |-login.html              // 登陆界面
|
|-application-xxx.yml           // 配置文件
|-logback-spring.xml            // 日志配置
|-quartz.properties             // Quartz配置
                            </pre>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="layui-card-body">
                                <blockquote class="layui-elem-quote">阅读开发规范之前请先了解 "项目结构"</blockquote>
                                <ul class="layui-timeline">
                                    <li class="layui-timeline-item">
                                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                        <div class="layui-timeline-content layui-text">
                                            <h3 class="layui-timeline-title">前端规范
                                            </h3>
                                            <ul>
                                                <li>css、图片、第三方lib（layui扩展模块除外）：全局的放置在 全部放在 "/static/global/" 下面；单页面的放置在"/static/pages/" 下</li>
                                                <li>layui 扩展模块放在 "/static/module" 下面，例如项目里面 "formSelects" 模块</li>
                                                <li>页面 html 放在 "/templates" 下面。业务相关放入 "/templates/module/"，根据相关业务增加目录</li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>

                                <ul class="layui-timeline">
                                    <li class="layui-timeline-item">
                                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                        <div class="layui-timeline-content layui-text">
                                            <h3 class="layui-timeline-title">代码生成
                                            </h3>
                                            <ul>
                                                <li>代码生成的模板路径："/templates/gen"，可以按照需求自定义</li>
                                                <li>代码生成主类：com.lotso.web.GeneratorCodeHandler，文档参照 MyBatis-Plus</li>
                                                <li>建议：不同模块的代码生成，可以通过新增 @Test 方法实现，如 generateOrgCode()、generateSysCode()，注意代码文件覆盖</li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>

                                <ul class="layui-timeline">
                                    <li class="layui-timeline-item">
                                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                        <div class="layui-timeline-content layui-text">
                                            <h3 class="layui-timeline-title">编码相关
                                            </h3>
                                            <ul>
                                                <li>统一命名规范：全部使用驼峰标识，package 使用小写、常量全部大写</li>
                                                <li>接口：IXXX 开头，如 IUserRoleMapper、IMenuService</li>
                                                <li>继承类实现类：XXXImpl 结尾，如 DictServiceImpl、UserServiceImpl</li>
                                                <li>特定类使用特定标识：如抽象类，以AbstractXX 开头，如 AbstractController、AbstractBaseEntity</li>
                                                <li>日志：只允许使用 SLF4J-API，或 @Slf4j 注解</li>
                                                <li>代码路径：基础代码（com.lotso.web.common.XXX）、业务代码（com.lotso.web.module）</li>
                                                <li>其他：具体参照各项目组编码规范</li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>

                                <ul class="layui-timeline">
                                    <li class="layui-timeline-item">
                                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                        <div class="layui-timeline-content layui-text">
                                            <h3 class="layui-timeline-title">MVC相关
                                            </h3>
                                            <ul>
                                                <li>controller：存放控制层代码，负责视图转发，不允许有大量业务代码</li>
                                                <li>service：存放业务逻辑代码</li>
                                                <li>mapper：数据库交互层代码</li>
                                                <li>entity：实体类存放</li>
                                                <li>model：数据模型层，如VO、VTO、其他相关类</li>
                                                <li>其他：自己定义</li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>

                                <ul class="layui-timeline">
                                    <li class="layui-timeline-item">
                                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                        <div class="layui-timeline-content layui-text">
                                            <h3 class="layui-timeline-title">数据库相关
                                            </h3>
                                            <ul>
                                                <li>表命名规范：T_模块_业务功能</li>
                                                <li>字段命名规范：与实体类保持一致，建议同样使用驼峰标识</li>
                                                <li>实体类规范：根据需要统一继承基础实体类，AbstractBaseEntity、AbstractDataEntity</li>
                                                <li>Mapper 业务接口：统一存放在 /xxx/mapper 包下面，并且继承 IBaseMapper 接口，标注 @Repository 注解</li>
                                                <li>Mapper.xml 文件：统一存放 /resources/mapper/， 存放对应模块路径、实体使用全限定名</li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="layui-card-body">
                                <div class="layui-carousel admin-carousel admin-news" id="text" lay-filter="text">
                                    <div carousel-item>

                                        <!--页面布局-->
                                        <div>
                                            <ul class="layui-timeline">
                                                <li class="layui-timeline-item">
                                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                                    <div class="layui-timeline-content layui-text">
                                                        <h3 class="layui-timeline-title">页面布局</h3>
                                                        <ul>
                                                            <li>前端 thymeleaf 模板布局，依赖于 thymeleaf 开源组件 <a href="https://github.com/ultraq/thymeleaf-layout-dialect">thymeleaf-layout-dialect</a></li>
                                                            <li>布局相关的代码路径在 "/templates/layout" 下，分别为：</li>
                                                            <table class="layui-table layui-text">
                                                                <colgroup>
                                                                    <col width="100">
                                                                    <col>
                                                                </colgroup>
                                                                <tbody>
                                                                <tr>
                                                                    <td>layout.html</td>
                                                                    <td>布局核心文件，定义布局格式</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>header.html</td>
                                                                    <td>头部文件，主要是负责引入CSS、JS、初始化 layui 扩展模块</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>navbar.html</td>
                                                                    <td>主页面头部工具栏，主要包括侧边伸缩、属性、个人信息、标签设置等功能</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>sidebar.html</td>
                                                                    <td>左侧菜单栏，暂时支持最多三层</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>content.html</td>
                                                                    <td>右侧主体内容部分（包括tab标签）</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>footer.html</td>
                                                                    <td>底部文件，包括Copyright、版本、手机屏幕遮罩层等</td>
                                                                </tr>
                                                                </tbody>
                                                            </table>
                                                            <li>layui 扩展模块初始化 ：</li>
                                                            <pre class="layui-code" lay-title="layui 扩展模块初始化">
layui.config({
    base: basePath + 'module/'
}).extend({
    formSelects: 'formSelects/formSelects-v4',
    treetable: 'treetable/treetable'
}).use(['admin'], function () {
    var admin = layui.admin;
});
                                                            </pre>
                                                            <li>
                                                                lauyui 扩展模块位于 "/static/module/" 下面，扩展模块 formSelects 使用文件夹存放，需要在 "extend" 中明确指出 formSelects 模块 js 的位置；
                                                                admin 直接放在 module 里面，没有使用用文件夹存放，不需要写extend，可以直接使用
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <!--Admin 模块-->
                                        <div>
                                            <h2>前端 admin 模块 - admin.js</h2>
                                            <br/>
                                            <ul class="layui-timeline">
                                                <li class="layui-timeline-item">
                                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                                    <div class="layui-timeline-content layui-text">
                                                        <h3 class="layui-timeline-title">预定义事件</h3>
                                                        <ul>
                                                            <li>
                                                                使用示例：只需要在 DOM 节点上面添加 app-event="xxx" 即可
                                                            </li>
                                                            <pre class="layui-code" lay-title="admin的事件示例">
<a app-event="flexible" title="侧边伸缩"></a> // navbar.html
<dd app-event="closeThisTabs"><a href="javascript:;">关闭当前标签页</a></dd> // content.html
                                                                </pre>
                                                            <li>事件列表</li>
                                                            <table class="layui-table layui-text">
                                                                <colgroup>
                                                                    <col width="100">
                                                                    <col>
                                                                </colgroup>
                                                                <tbody>
                                                                <tr>
                                                                    <td><h3>事件</h3></td>
                                                                    <td><h3>描述</h3></td>
                                                                </tr>
                                                                <tr>
                                                                    <td>flexible</td>
                                                                    <td>折叠侧导航</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>refresh</td>
                                                                    <td>刷新主体部分</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>back</td>
                                                                    <td>浏览器后退</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>fullScreen</td>
                                                                    <td>全屏切换</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>leftPage</td>
                                                                    <td>左滚动选项卡</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>rightPage</td>
                                                                    <td>右滚动选项卡</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>closeThisTabs</td>
                                                                    <td>关闭当前选项卡</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>closeOtherTabs</td>
                                                                    <td>关闭其他选项卡</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>closeAllTabs</td>
                                                                    <td>关闭全部选项卡</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>closeDialog</td>
                                                                    <td>关闭元素所在的layer弹窗</td>
                                                                </tr>
                                                                </tbody>
                                                            </table>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>

                                            <ul class="layui-timeline">
                                                <li class="layui-timeline-item">
                                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                                    <div class="layui-timeline-content layui-text">
                                                        <h3 class="layui-timeline-title">方法</h3>
                                                        <ul>
                                                            <li>方法使用示例：</li>
                                                            <pre class="layui-code" lay-title="admin的方法示例">
layui.use(['admin'], function () {
    var admin = layui.admin;
    admin.flexible(true);    // 折叠侧导航
});
                                                            </pre>
                                                            <li>方法列表：</li>
                                                            <table class="layui-table layui-text">
                                                                <colgroup>
                                                                    <col width="100">
                                                                    <col>
                                                                </colgroup>
                                                                <tbody>
                                                                <tr>
                                                                    <td><h3>方法</h3></td>
                                                                    <td><h3>参数</h3></td>
                                                                    <td><h3>描述</h3></td>
                                                                </tr>
                                                                <tr>
                                                                    <td>activeNav(url)</td>
                                                                    <td>a标签里面的href值</td>
                                                                    <td>设置侧导航栏选中</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>refresh()</td>
                                                                    <td>无</td>
                                                                    <td>刷新主体部分</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>popupRight(path)</td>
                                                                    <td>html地址</td>
                                                                    <td>右侧弹出弹窗</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>popupCenter(object)</td>
                                                                    <td>见方法详解</td>
                                                                    <td>中间弹出弹窗</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>open(object)</td>
                                                                    <td>见方法详解</td>
                                                                    <td>封装layer弹出弹窗</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>ajax(object)</td>
                                                                    <td>见方法详解</td>
                                                                    <td>封装的ajax请求</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>其他</td>
                                                                    <td>无</td>
                                                                    <td>详见admin.js，如 缓存临时数据（putTempData）、显示加载动画（showLoading）、滑动选项卡（rollPage）等</td>
                                                                </tr>
                                                                </tbody>
                                                            </table>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>

                                            <ul class="layui-timeline">
                                                <li class="layui-timeline-item">
                                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                                    <div class="layui-timeline-content layui-text">
                                                        <h3 class="layui-timeline-title">中间弹出弹窗方法 popupCenter </h3>
                                                        <ul>
                                                            <blockquote class="layui-elem-quote">
                                                                中间弹出弹窗 popupCenter：核心是封装的layer.open()方法，支持回调
                                                            </blockquote>
                                                            <li>使用示例：</li>
                                                            <pre class="layui-code" lay-title="admin的方法示例">
admin.popupCenter({
    title: '添加用户',
    path: 'system/user/editForm',
    finish: function () {
        // 这个方法就是回调的功能，用户添加成功之后让表格 reload
        table.reload('user-table', {});
    }
});
                                                            </pre>
                                                            <li>参数说明：</li>
                                                            <blockquote class="layui-elem-quote">
                                                                除了 path 和 finish 是 popupCenter 新增的参数，其他参数均与 layer 的 open 参数一样，
                                                                但是 type 和 content 参数无效， type固定是1（页面层），content 会被 path 的内容覆盖
                                                            </blockquote>

                                                            <table class="layui-table layui-text">
                                                                <colgroup>
                                                                    <col width="100">
                                                                    <col>
                                                                </colgroup>
                                                                <tbody>
                                                                <tr>
                                                                    <td><h3>参数</h3></td>
                                                                    <td><h3>类型</h3></td>
                                                                    <td><h3>是否必须</h3></td>
                                                                    <td><h3>描述</h3></td>
                                                                </tr>
                                                                <tr>
                                                                    <td>title</td>
                                                                    <td>变量</td>
                                                                    <td>否</td>
                                                                    <td>标题，不写没有标题</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>path</td>
                                                                    <td>变量</td>
                                                                    <td>是</td>
                                                                    <td>html路径</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>finish</td>
                                                                    <td>方法</td>
                                                                    <td>否</td>
                                                                    <td>finish回调</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>success</td>
                                                                    <td>方法</td>
                                                                    <td>否</td>
                                                                    <td>弹窗关闭的回调</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>end</td>
                                                                    <td>方法</td>
                                                                    <td>否</td>
                                                                    <td>弹窗关闭的回调</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>其他</td>
                                                                    <td>...</td>
                                                                    <td>...</td>
                                                                    <td>参考 layer 的 open 方法参数</td>
                                                                </tr>
                                                                </tbody>
                                                            </table>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>

                                            <ul class="layui-timeline">
                                                <li class="layui-timeline-item">
                                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                                    <div class="layui-timeline-content layui-text">
                                                        <h3 class="layui-timeline-title">封装的 layer 弹窗 open </h3>
                                                        <ul>
                                                            <li>使用示例：</li>
                                                            <pre class="layui-code" lay-title="admin的open方法示例">
admin.open({
    title: '新增用户',
    path: 'system/user/editForm',
    success: function(){
        // 成功回调
    }
});
                                                            </pre>
                                                            <li>参数说明：</li>
                                                            <blockquote class="layui-elem-quote">
                                                                参数与popupCenter方法差不多，没有finish方法
                                                            </blockquote>

                                                            <li>弹窗出现滚动条： 弹窗的默认高度是自适应的，设置了宽高后内容超出是无法出现滚动条的，如果你需要弹窗出现滚动条，请使用如下的方式：</li>
                                                            <pre class="layui-code" lay-title="弹窗出现滚动条示例1">
admin.open({
    title: '新增用户',
    area: ['500px','300px'],
    path: 'system/user/editForm',
    success: function (layero, index) {// 关键代码
        $(layero).children('.layui-layer-content').css('overflow-y', 'scroll');
    }
});
                                                            </pre>
                                                            <pre class="layui-code" lay-title="弹窗出现滚动条示例2">
// 写scroll可以防止弹窗内表格出现滚动条
$(layero).children('.layui-layer-content').css('overflow-y', 'scroll');

// 弹窗内没有表格使用auto即可
$(layero).children('.layui-layer-content').css('overflow-y', 'auto');

// 水平垂直都有滚动条使用overflow
$(layero).children('.layui-layer-content').css('overflow', 'auto');
                                                            </pre>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>

                                            <ul class="layui-timeline">
                                                <li class="layui-timeline-item">
                                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                                    <div class="layui-timeline-content layui-text">
                                                        <h3 class="layui-timeline-title">封装的ajax请求</h3>
                                                        <ul>
                                                            <li>使用示例：</li>
                                                            <pre class="layui-code" lay-title="admin的ajax示例">
admin.ajax({
    url: 'XXX',
    type: 'GET',
    dataType: 'json',
    data: {
       param:''
    },
    success: function (result, status, xhr) {

    }
});
                                                            </pre>
                                                            <li>使用方法与参数</li>
                                                            <blockquote class="layui-elem-quote">
                                                                使用方法跟$.ajax一模一样，封装是为了处理权限、404等问题，使用参数请参考 $.ajax
                                                            </blockquote>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>

                                            <ul class="layui-timeline">
                                                <li class="layui-timeline-item">
                                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                                    <div class="layui-timeline-content layui-text">
                                                        <h3 class="layui-timeline-title">缓存临时数据 putTempData</h3>
                                                        <ul>
                                                            <li>使用示例：</li>
                                                            <pre class="layui-code" lay-title="admin的putTempData示例">
admin.putTempData('t_user_name', 'Sam');    // 缓存数据
var userName = admin.getTempData('t_user_name');    // 获取缓存数据
console.log(userName);
                                                            </pre>
                                                            <li>使用场景：如修改用户，用于用户数据的回显</li>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-col-lg4 layui-col-md4 layui-col-xs12">
        <div class="layui-card">
            <div class="layui-card-header">后台框架</div>
            <div class="layui-card-body">
                <table class="layui-table layui-text">
                    <colgroup>
                        <col width="100">
                        <col>
                    </colgroup>
                    <tbody>
                    <tr>
                        <td>核心框架</td>
                        <td>Spring Boot、Spring、Spring MVC</td>
                    </tr>
                    <tr>
                        <td>持久层</td>
                        <td>MyBatis、Druid、<a href="http://mp.baomidou.com" target="_blank">MyBatis-Plus</a></td>
                    </tr>
                    <tr>
                        <td>权限框架</td>
                        <td>Spring Security</td>
                    </tr>
                    <tr>
                        <td>缓存框架</td>
                        <td>Spring Cache、Ehcache 、Redis</td>
                    </tr>
                    <tr>
                        <td>日志管理</td>
                        <td>SLF4J、LogBack</td>
                    </tr>
                    <tr>
                        <td>任务调度</td>
                        <td>Spring Task、Quartz</td>
                    </tr>
                    <tr>
                        <td>工具组件</td>
                        <td>Guava、Apache Commons、Jackson、LomBok、UserAgentUtils</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">前端框架</div>
            <div class="layui-card-body">
                <table class="layui-table layui-text">
                    <colgroup>
                        <col width="100">
                        <col>
                    </colgroup>
                    <tbody>
                    <tr>
                        <td>模板引擎</td>
                        <td><a href="https://www.thymeleaf.org/" target="_blank">Thymeleaf</a></td>
                    </tr>
                    <tr>
                        <td>核心框架</td>
                        <td>
                            <a href="http://www.layui.com/" target="_blank">layui-v2.4.5</a>、
                            <a href="https://gitee.com/whvse/treetable-lay" target="_blank">layui-treetable</a>、
                            <a href="http://sun.faysunshine.com/layui/formSelects-v4/example/example_v4.html" target="_blank">formSelects-v4</a>、
                            Jquery
                        </td>
                    </tr>
                    <tr>
                        <td>其他组件</td>
                        <td>
                            jquery.backstretch.js、
                            <a href="https://github.com/itorr/q.js" target="_blank">q.js</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">友情链接</div>
            <div class="layui-card-body">
                <div class="layui-carousel admin-carousel admin-news" id="link">
                    <div carousel-item>
                        <div>
                            <a href="https://sam-blog.gitee.io/" target="_blank" class="layui-bg-green carousel-item-sx">SAM-SHO 个人博客</a>
                        </div>
                        <div>
                            <a href="https://blog.csdn.net/u012228718/article/category/1705431" target="_blank" class="layui-bg-cyan carousel-item-sx">SAM-SHO CSDN个人主页</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['carousel', 'element', 'code'], function () {

        var carousel = layui.carousel;
        var device = layui.device;

        layui.link(basePath + 'pages/css/console.css');

        // 渲染轮播：友情链接
        carousel.render({
            elem: '#link',
            width: '100%',
            height: '60px',
            arrow: 'none',
            autoplay: true,
            trigger: device.ios || device.android ? 'click' : 'hover',
            anim: 'fade'
        });

        // 渲染轮播：技术文档
        var options = {};
        options.elem = '#text';
        options.width = '100%';
        options.height = '750px';
        options.arrow = 'hover';
        options.autoplay = false;
        options.trigger = device.ios || device.android ? 'click' : 'hover';
        options.anim = 'fade';

        var ins = carousel.render(options);

        //监听轮播切换事件（text 来源于对应HTML容器的 lay-filter="text" 属性值）
        carousel.on('change(text)', function (obj) {
            options.height = '750px';
            if (obj.index === 1) {
                options.height = '4200px';
            }
            //重置轮播
            ins.reload(options);
        });

        // 代码块渲染
        layui.code({
            about: false,
            encode: true,
            height: '310px'
        });
    });
</script>

